<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    let data = {
      name: "xx大学",
      address: "xx路xx号",
      a:{ // 不能监视到多级对象
        b:1,
      }
    }

    // 创建一个监视的实例对象,用于监视data中属性的变化
    const obs = new Observer(data);
    console.log(obs);
    // 准备一个 vm 实例对象
    let vm = {};
    vm._data = data = obs;
    console.log(vm);

    function Observer(obj){
      // 汇总对象中的所有属性形成一个数组
      const keys = Object.keys(obj);
      // 遍历
      keys.forEach(k => {
        // 为obs实例对象添加数组中的属性
        Object.defineProperty(this,k,{ // this指向obs实例对象
          get(){
            return obj[k];
          },
          set(val){
            console.log(`${k}被改了,我要去解析模板,生成虚拟DOM......`);
            obj[k] = val;
          },
        })
      })
    }

  </script>
</body>
</html>